import {ref, onMounted, onUnmounted} from 'vue'
import {NAlert} from 'naive-ui'
import {useXianLuStore} from '#imports'
import LandItem from './LandItem'
import {ZhiwuStatus} from '~/utils/zhiwilist'
import {useSessionStorage,} from "@vueuse/core"
import {landLevels} from '~/utils/land'

export default defineNuxtComponent({
    name: "农田区域",
    setup() {
        const store = useXianLuStore()
        // 模拟土地数据
        const landList = ref([
            {
                id: '1',
                level: 1,
                status: 'ready',
                zhiwu: null,
                type: 'land',
                developCost: 0 // 第一块地已开发
            },
            {
                id: '2',
                level: 0,
                status: 'notReady',
                zhiwu: null,
                type: 'land',
                developCost: landLevels[0].lingshi // 使用land.ts中定义的灵石数量
            },
            {
                id: '3',
                level: 0,
                status: 'notReady',
                zhiwu: null,
                type: 'land',
                developCost: landLevels[0].lingshi // 使用land.ts中定义的灵石数量
            },
            {
                id: '4',
                level: 0,
                status: 'notReady',
                zhiwu: null,
                type: 'land',
                developCost: landLevels[0].lingshi // 使用land.ts中定义的灵石数量
            },
            {
                id: '5',
                level: 0,
                status: 'notReady',
                zhiwu: null,
                type: 'land',
                developCost: landLevels[0].lingshi // 使用land.ts中定义的灵石数量
            },
            {
                id: '6',
                level: 0,
                status: 'notReady',
                zhiwu: null,
                type: 'land',
                developCost: landLevels[0].lingshi // 使用land.ts中定义的灵石数量
            },
        ])

        // 控制提示是否显示
        const showTip = useSessionStorage("nongtianTip", false)

        // 关闭提示
        const closeTip = () => {
            showTip.value = false
        }

        // 植物生长定时器
        let growthTimer = null

        // 更新植物生长状态
        // 更新植物生长状态
        const updatePlantGrowth = () => {
            landList.value.forEach(land => {
                if (land.zhiwu && land.zhiwu.status !== ZhiwuStatus.CHENGSHU) {
                    // 计算生长加速
                    let growthSpeed = 1
                    if (land.zhiwu.growthBoost) {
                        // 除虫加成
                        if (land.zhiwu.growthBoost.bug > 0) {
                            growthSpeed += land.zhiwu.growthBoost.bug / 100
                        }
                        // 浇水加成
                        if (land.zhiwu.growthBoost.water > 0) {
                            growthSpeed += land.zhiwu.growthBoost.water / 100
                        }
                    }

                    // 根据当前状态决定下一个状态
                    switch (land.zhiwu.status) {
                        case ZhiwuStatus.FAYA:
                            // 发芽阶段结束后进入生长阶段
                            land.zhiwu.growthProgress = (land.zhiwu.growthProgress || 0) + growthSpeed
                            if (land.zhiwu.growthProgress >= land.zhiwu.growTime.faya) {
                                land.zhiwu.status = ZhiwuStatus.SHENGZHANG
                                land.zhiwu.growthProgress = 0
                            }
                            break
                        case ZhiwuStatus.SHENGZHANG:
                            // 生长阶段结束后进入开花阶段
                            land.zhiwu.growthProgress = (land.zhiwu.growthProgress || 0) + growthSpeed
                            if (land.zhiwu.growthProgress >= land.zhiwu.growTime.shengzhang) {
                                land.zhiwu.status = ZhiwuStatus.KAIHUA
                                land.zhiwu.growthProgress = 0
                            }
                            break
                        case ZhiwuStatus.KAIHUA:
                            // 开花阶段结束后进入成熟阶段
                            land.zhiwu.growthProgress = (land.zhiwu.growthProgress || 0) + growthSpeed
                            if (land.zhiwu.growthProgress >= land.zhiwu.growTime.kaihua) {
                                land.zhiwu.status = ZhiwuStatus.CHENGSHU
                                land.zhiwu.growthProgress = 0
                            }
                            break
                    }
                }
            })
        }

        // 收获植物
        const harvestPlant = (landId) => {
            const land = landList.value.find(l => l.id === landId)
            if (land && land.zhiwu && land.zhiwu.status === ZhiwuStatus.CHENGSHU) {
                // 获取产品
                land.zhiwu.product.forEach(product => {
                    store.addItem({
                        type: product.type,
                        name: product.name,
                        amount: product.amount,
                        description: product.description
                    })
                })

                // 获得经验
                store.addExp(land.zhiwu.exp.shouhua || 20)

                // 清空土地
                land.zhiwu = null
            }
        }

        // 组件挂载时启动定时器
        onMounted(() => {
            // 每秒更新一次植物生长状态
            growthTimer = setInterval(updatePlantGrowth, 1000)
        })

        // 组件卸载时清除定时器
        onUnmounted(() => {
            if (growthTimer) {
                clearInterval(growthTimer)
            }
        })

        return () => <div class="w-full h-full p-4">
            <div class="mb-4">
                <h2 class="text-xl font-bold">我的农田</h2>
                <p class="text-gray-500">管理你的土地，种植灵植</p>
            </div>

            {showTip.value && (
                <NAlert type="info" style="margin-bottom: 16px;" closable onClose={closeTip}>
                    提示：开发土地后可以种植灵植，灵植成熟后可以收获产品。土地等级越高，可以种植的灵植种类越多。
                </NAlert>
            )}

            <div class={"w-full grid gap-6px p-10px"} style={{
                gridTemplateColumns: "repeat(auto-fit, 200px)",
                gridTemplateRows: "repeat(auto-fit, 200px)",
                gridAutoRows: "minmax(200px, auto)",
                gridAutoFlow: "dense"
            }}>
                {landList.value.map((land: any) => (<LandItem data={land}/>))}
            </div>
        </div>
    }
})